<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>习近平总书记重要讲话精神知识</title>
    <link rel="stylesheet" type="text/css" href="{{url('css/style.css')}}">
    <!-- head 中 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">
    <style>
        .selected{
            background-color: #f5dd99;
        }
        .right_answer{
            background-color: #1f8032;
        }
        .no_right_answer{
            background-color: #ff1f29;
        }
    </style>
</head>
<body>

<div class="wrap">
    <div class="topic_wrap" style="display: block;">

        <div class="fade_wrap">

            <div class="wrap_top">

                <div class="topic_no">

                    <span class="curr_no" id="curr_no">题目</span>

                </div>

            </div>

            <div class="wrap_top1">

                <div class="topic_title" id="topic_title">@if(!is_null($question)){{$question['question']}}@endif</div>

            </div>

            <div class="wrap_center">

                <table class="topic_option" id="topic_option">
                    <tbody>
                    @if(!is_null($answers))
                        @foreach($answers as $answer)
                    <tr>
                        <td class="option_item" id="answerid_{{$answer->id}}" data-id="{{$answer->id}}">{{$answer->select_num}}.{{$answer->answer}}</td>
                    </tr>
                    <tr></tr>
                    @endforeach
                        @endif
                    </tbody>
                </table>
            </div>

            <div class="wrap_answer" style="display: none;">
                {{--<p>--}}
                    {{--<span style="color: red">正确答案为：</span>--}}
                    {{--<span id="answer_num" style="font-weight: bold"></span>--}}
                {{--</p>--}}
                <p style="display: none" id="second"><span id="num"></span><span>秒自动跳转打卡二维码</span></p>
            </div>
        </div>

    </div>

</div><!-- /.wrap -->

<script type="text/javascript" src="{{url('js/jquery.js')}}"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
</body>
<script>
    $(function () {
        $('.option_item').click(function () {
            var aa = $(this);
             var aid = aa.data('id');
             $(this).addClass('selected');
            $.ajax({
                type:"post",
                url:'{{route('Api.Question.checkAnswer')}}',
                dataType:"json",
                data:{
                    'aid':aid
                },
                success:function(obj){
                    console.log(obj);
                    if(obj.level == "right"){
                        $('.wrap_answer').show();
//                        $('#answer_num').html(obj.data.answer);
                        $.toast("回答正确！");
                        aa.removeClass('selected');
                        aa.addClass('right_answer');
                        aa.css('color','white');
                        $('#second').show();
                        jump(6,obj.data.qid);
                    }else if(obj.level == 'no_right'){
                        $('.wrap_answer').show();
                        aa.removeClass('selected');
                        aa.addClass('no_right_answer');
                        aa.css('color','white');
                        $('#answerid_'+obj.data.answer_id).addClass('right_answer');
                        $('#answerid_'+obj.data.answer_id).css('color','white');
                        $.toast("回答错误哦！正确答案是："+obj.data.answer, "cancel");
                        $('#second').show();
                        jump(6,obj.data.qid);
                    }else{
                        $.toast(obj.message, "forbidden");
                    }
                },
                error:function(obj){

                }
            });
        });

        function jump(count,qid) {
            window.setTimeout(function(){
                count--;
                if(count > 0) {
                    $('#num').html(count);
                    jump(count,qid);
                } else {
                    location.href="{{route('Home.Page.analys')}}?qid="+qid;
                }
            }, 1000);
        }
    });
</script>
</html>